<script setup lang="ts">
import { ref } from 'vue';

import { ElCol, ElDivider, ElRow } from 'element-plus';

import { getBaseMapUrl } from '#/utils';

const emit = defineEmits(['closeMapPannel', 'switchMap']);

const mapList = ref([
  {
    id: 'vec_map',
    type: 'vector',
    label: '矢量',
    value: 'vec_w',
  },
  {
    id: 'img_map',
    type: 'image',
    label: '影像',
    value: 'img_w',
  },
  {
    id: 'ter_map',
    type: 'terrain',
    label: '地形',
    value: 'ter_w',
  },
  {
    name: 'blank_map',
    type: 'blank',
    label: '空白',
    value: 'blank',
  },
]);

const switchMap = (map: any) => {
  emit('switchMap', map);
};
</script>

<template>
  <div class="base-map-control">
    <ElRow
      v-for="(row, rowIndex) in Math.floor(mapList.length / 2) + 1"
      :key="rowIndex"
    >
      <ElCol
        :span="12"
        v-for="(map, index) in mapList.filter(
          (_item, index) => index >= rowIndex * 2 && index < (rowIndex + 1) * 2,
        )"
        :key="index"
      >
        <div class="image-item" @click="switchMap(map)">
          <img :src="getBaseMapUrl(map.value)" alt="Image" :title="map.label" />
          <span class="image-text">{{ map.label }}</span>
        </div>
      </ElCol>
      <ElDivider
        v-if="row === 1"
        border-style="hidden"
        style="margin-top: 1px; margin-bottom: 1px"
      />
    </ElRow>
  </div>
</template>

<style lang="scss" scoped>
.base-map-control {
  width: 100%;
  height: 100%;
  // padding: 5px;
}

.image-item {
  position: relative;
  box-sizing: border-box;
  // overflow: hidden;
  width: 100%;
  height: 70px;
  padding: 0 2px;

  &:hover {
    .image-text {
      background-color: #3f9eff;
    }
  }

  img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    border: #dfdfdf solid 2px;
    border-radius: 5px;

    &:hover {
      cursor: pointer;
      border: #3f9eff solid 2px;
      scale: 0.98;
    }
  }

  .image-text {
    position: absolute;
    right: 4px;
    bottom: 2px;
    padding: 4px 8px;
    font-size: 12px;
    color: white;
    background: rgb(0 0 0 / 50%);
    border-top-left-radius: 5px;

    &:hover {
      cursor: pointer;
    }
  }
}
</style>
